<template>
  <view>
    <my-message-top :text="'消息详情'"></my-message-top>
    
    <view class="message-detail">
      <view class="message-detail-top">
        <text class="message-text1">{{ informDetail.title }}</text>
        <text class="message-text2">{{informDetail.createTime}}</text>
      </view>
      <text class="message-text3">{{informDetail.content}}</text>
      <image :src="informDetail.imgs[0]" mode=""></image>
    </view>
  </view>
</template>

<script>
  import {getArticleDetail} from '../../api/article.js'
  export default {
    data() {
      return {
        informDetail:{}
      };
    },
    async onLoad(option){
      console.log(option.aid);
      const {data:{data:res}} = await getArticleDetail(option.aid)
      console.log(res);
      this.informDetail = res
      console.log(this.informDetail.content);
    }
  }
</script>

<style lang="scss">
.message-detail{
  display: flex;
  flex-direction: column;
  margin: 35rpx 35rpx;
  .message-detail-top{
    margin-bottom: 25rpx;
    display: flex;
    flex-direction: column;
    .message-text1{
      font-size: 25px;
      font-weight: bold;
      color: #333333;
    }
    .message-text2{
      font-size: 12px;
      color: #868686;
    }
  }
  .message-text3{
    font-size: 15px;
    color: #333333;
  }
  image{
    width: 670rpx;
    height: 458rpx;
    background-color: #FEF4D1;
    margin-top: 20rpx;
  }
}
</style>
